/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Constantia, serif !important;
     width: 100%;
    height: 100%;
    position: relative;
   /* background-image: url(http://sp2019-test:8080/internship/Shared%20Documents/images/stateHouseOpacity.png)!important; */

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 90px;
    background-size: 100% auto;
    /*padding-top: 70px;*/
    font-size: 105%;
}

 .footer {
    position: relative;          /* ✅ stay in normal flow */
    width: 100% !important;      /* ✅ span full width */
    background: #2e3c49 !important;
    color: #fff !important;
    font-family: Cambria, "Times New Roman", serif !important;
    line-height: 30px;
    text-align: center;          /* optional */
    padding: 10px 0;              /* add breathing room */
    box-sizing: border-box;
}
#header_main {
    background: url('../images/header_bg.gif') repeat scroll center top transparent;
    width: 100%;
    height: 80px;
}

.text-center {
    text-align: center;
    padding: 20px; /* Adjust padding as needed */
}

.row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Media query for mobile view */
@media (max-width: 767px) {
    .row {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    #apply-link {
        /* Adjust the link for smaller screens */
        display: block; /* Ensure the link takes up the full width */
        text-align: center; /* Center the link text */
        margin-top: 10px; /* Add some space between the heading and the link */
    }
}

@media (max-width: 767px) {
    .text-center {
        /* Adjust center alignment for smaller screens */
        display: block;
        padding-top: 30px;
    }
}

/*.sliderimg {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;*/ /* Ensure content doesn't overflow */
/*}

.slideimg {
    display: flex;*/ /* Display slides as flex items */
/*justify-content: center;*/ /* Center content horizontally */
/*align-items: center;*/ /* Center content vertically */
/*width: 100%;*/ /* Adjust width as needed */
/*height: 60%;*/ /* Allow the height to adjust based on content */
/*}

    .slideimg img {
        max-width: 100%;*/ /* Ensure images don't exceed the width of their container */
/*height: 60%;*/ /* Maintain aspect ratio */
/*width: 98%;*/ /* Fill the entire space of the slide */
/*}*/

.sliderimg {
    position: relative;
    width: 750px;   
  height: 500px;          /* or fixed width, e.g. 800px */
          /* optional: limit size */
    margin: auto;           /* center slider */
    overflow: hidden;       /* hide overflow */
}

.slideimg img {
    width: 750px;            /* all images scale to container width */
    height: 500px;          /* fixed height for all images */
    object-fit: cover;      /* crop to fit without distortion */
    border: 5px solid #fff; /* add white border */
    border-radius: 10px;    /* optional: rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* optional: shadow */
    margin:15px;
}

.slideimg {
    display: none;          /* hide all slides by default */
}

.wrapper header {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 20px;
    background: #00416a;
}

.bg-white {
    background-color: #AFCBE0 !important;
}


#In-Person:checked ~ nav label.In-Person, #Remote:checked ~ nav label.Remote, #Hybrid:checked ~ nav label.Hybrid, #AvailableSessions:checked ~ nav label.AvailableSessions {
    color: #fff;
}

.wrapper nav label:hover {
    background: rgba(245, 134, 15, 0.3);
}

.wrapper nav label {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: #b8860b;
    font-size: 14px;
    border-radius: 5px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
header {
    padding: 10px 0;
    width: 100%;
    height: 80px;
    background-image: url('Images/header_bg.gif');
}
#In-Person:checked ~ section .content-1, #Remote:checked ~ section .content-2, #Hybrid:checked ~ section .content-3, #AvailableSessions:checked ~ section .content-4 {
    display: block;
}

section .content {
    display: none;
    background: #00416a;
}

.btn.btn-primary span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

    .btn.btn-primary span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -10px;
        transition: 0.5s;
    }

.btn.btn-primary:hover span {
    padding-right: 15px;
}

    .btn.btn-primary:hover span:after {
        opacity: 1;
        right: 0;
    }

.btn.btn-primary:active {
    top: 2px;
}

.btn.btn-primary:hover {
    color: dimgrey;
    background-color: transparent;
}

.btn-secondary {
    border-radius: 5px;
    border: 2px black;
    color: black;
    text-shadow: none;
    background-color: orange;
    font-weight: bold;
    position: relative;
    transition-duration: 0.2s;
    cursor: pointer;
    padding: 5px;
}

    .btn-secondary span {
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        position: relative;
        transition: 0.5s;
    }

        .btn-secondary span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -10px;
            transition: 0.5s;
        }

    .btn-secondary:hover span {
        padding-right: 15px;
    }

        .btn-secondary:hover span:after {
            opacity: 1;
            right: 0;
            background-color: orange;
        }

    .btn-secondary:active {
        top: 2px;
    }

    .btn-secondary:hover {
        color: black;
        background-color: orange;
        font-style: bold;
        padding: 7.5px;
    }

.btn-third:hover {
    opacity: 0.8;
}

a {
    color: #204156;
    text-decoration: none;
}

.nav navbar-nav li a {
    color: #FFF;
    text-decoration: none;
}

.wrapper nav {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

    .wrapper nav label {
        display: block;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        position: relative;
        z-index: 1;
        color: darkgoldenrod;
        font-size: 14px;
        border-radius: 5px;
        margin: 0 5px;
        transition: all 0.3s ease;
    }

        .wrapper nav label:hover {
            background: rgba(245,134,15,0.3);
        }

#In-Person:checked ~ nav label.In-Person,
#Remote:checked ~ nav label.Remote,
#Hybrid:checked ~ nav label.Hybrid,
#AvailableSessions:checked ~ nav label.AvailableSessions {
    color: #fff;
}

nav label i {
    padding-right: 7px;
}

nav .slider {
    position: absolute;
    height: 100%;
    width: 25%;
    left: 0;
    bottom: 0;
    z-index: 0;
    border-radius: 5px;
    background: darkgoldenrod;
    transition: all 0.3s ease;
}

input[type="radio"] {
    display: none;
}

#Remote:checked ~ nav .slider {
    left: 25%;
}

#Hybrid:checked ~ nav .slider {
    left: 50%;
}

#AvailableSessions:checked ~ nav .slider {
    left: 75%;
}

section .content {
    display: none;
    background: #00416a;
}

#In-Person:checked ~ section .content-1,
#Remote:checked ~ section .content-2,
#Hybrid:checked ~ section .content-3,
#AvailableSessions:checked ~ section .content-4 {
    display: block;
}

section .content .title {
    font-size: 21px;
    font-weight: 500;
    margin: 30px 0 10px 0;
}

section .content p {
    text-align: justify;
}

.wrapper2 {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

    .wrapper2 .box {
        padding: 25px;
        border-radius: 3px;
        border: 2px solid black;
        height: 100%;
        max-width: 1200px;
        width: 100%;
        margin: auto;
        box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
        background-color: #00416a;
        color: white;
        font-weight: normal;
    }

        .wrapper2 .box i.quote {
            font-size: 20px;
        }

        .wrapper2 .box .content {
            display: block;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
        }

.box .info .name {
    font-weight: normal;
    font-size: 17px;
    color: white;
}

.box .info .job {
    font-size: 16px;
    font-weight: 500;
    color: darkgoldenrod;
}

.box .info .stars {
    margin-top: 2px;
}

    .box .info .stars i {
        color: darkgoldenrod;
    }

.box .content .image {
    float: right;
    height: 135px;
    width: 135px;
    padding: 3px;
    background: darkgoldenrod;
    border-radius: 50%;
}

.content .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
}

.box:hover .content .image img {
    border-color: #00416a;
}


/* Portrait phones and smaller than 426px - Don't forget to have the standard css declarations above the media query or the query won't work either.*/
@media screen and (max-width: 426px) {

    /* sets the width for the body class to match the width of jumbotron, footer, header classes since on mobile, must set a desired px size width to fill the screen.
    margin-left and margin-right centers the content on the mobile screen */
    body {
        width: auto !important;
        margin-left: auto;
        margin-right: auto;
        font-family: Constantia, serif !important;
    }
    /* sets the width for the header class so it fills up the entire screen in portrait phones and smaller than 420px devices */


    /* sets the width for the footer class so it fills up the entire screen in portrait phones and smaller than 420px devices */


    .jumbotron {
        display: flex;
        align-items: center;
        background-image: url('https://cloudfront-us-east-1.images.arcpublishing.com/bostonglobe/QXTJFFDLOAI6TH7DYAZXKAWNCQ.jpg');
        background-size: 100%;
        background-position: center;
        background-size: auto;
        border: 5px groove black;
        margin-left: 1.5px;
        margin-right: 1px;
        color: #ffffff;
        /* need to set width to 100% and not a specific px value since then the inside of the jumbotron won't be responsive at any size different than what is set, so the font will 
        start to get cut off or uneven when resizing browser */
        height: 500px;
        width: 100%;
        text-shadow: 0.25px 0.25px 0.25px #000000;
    }

    .card {
        width: 100%;
    }


    .wrapper2 .box {
        width: 100%;
        padding: 30px;
    }


    .wrapper nav {
        height: 50px;
        width: 100%;
    }


        .wrapper nav label {
            height: 50px;
            width: 100%;
        }
}

/* Portrait phones, small tablets, and smaller than 768px but bigger than 426px - Don't forget to have the standard css declarations above the media query or the query won't work either.*/
@media screen and (max-width: 767px) and (min-width: 427px) {

    .jumbotron {
        display: flex;
        align-items: center;
        background-image: url('https://cloudfront-us-east-1.images.arcpublishing.com/bostonglobe/QXTJFFDLOAI6TH7DYAZXKAWNCQ.jpg');
        background-attachment: fixed;
        background-size: 100%;
        background-size: cover;
        margin-right: 0px;
        padding-right: 0px;
        color: #ffffff;
        /* need to set width to 100% and not a specific px value since then the inside of the jumbotron won't be responsive at any size different than what is set, so the font will 
        start to get cut off or uneven when resizing browser */
        height: 500px;
        width: 100%;
        text-shadow: 0.25px 0.25px 0.25px #000000;
    }

    /* selector ">" only selects class '.item' that is DIRECTLY inside a class '.carousel-inner'. Then, another ">" only select 'img' that is DIRECTLY inside the .item we selected earlier */
    .carousel-inner > .item > img {
        /* sets the image inside of the carousel to be 1525x950 resolution including its caption, so the carousel on the webpage spans 1525x950 pixels */
        width: 100%;
        height: 400px;
    }

    .card {
        width: 100%;
        max-width: 100%;
        width: 100%;
        /* margin: 0 20px;*/
        margin: 20px 0;
        outline-style: solid;
        outline-width: thin;
        background: #00416a;
        height: 480px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    }


    .wrapper2 .box {
        width: 100%;
        padding: 30px;
    }


    .wrapper nav {
        height: 50px;
        width: 100%;
    }


        .wrapper nav label {
            height: 50px;
            width: 100%;
        }
}

.card {
    max-width: 100%;
    width: 50%;
    /* margin: 0 20px;*/
    margin: 20px 0;
    outline-style: solid;
    outline-width: thin;
    background: #00416a;
    height: 480px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}


    .card .img {
        height: 230px;
        width: 100%;
    }

        .card .img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    .card .top-text {
        padding: 5px;
    }

        .card .top-text .name {
            font-size: 18px;
            font-weight: normal;
            color: white;
        }

        .card .top-text p {
            font-size: 18px;
            font-weight: 600;
            color: darkgoldenrod;
            line-height: 20px;
        }

    .card .bottom-text {
        padding: 0 20px 10px 20px;
        margin-top: 5px;
        font-weight: normal;
        background: #00416a;
        color: white;
        opacity: 1;
        visibility: visible;
    }


        .card .bottom-text .text {
            text-align: justify;
            width: 100%;
        }

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
    .card {
        width: 100%; /* Set width to 100% for mobile devices */
        height: auto; /* Allow height to adjust based on content */
        margin: 10px auto; /* Center-align the card and reduce margin */
    }
}

.img-responsive {
    border: 4px groove black;
    border-radius: 3px;
    float: left;
    object-fit: cover;
}

.italic {
    font-style: italic;
}

.slider2 {
    background-color: transparent;
    box-shadow: 0 10px 20px -5px rgb(0, 0, 0);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .slider2::before,
    .slider2::after {
        content: "";
        height: 80px; /* Adjusted height */
        position: absolute;
        width: 200px; /* Adjusted width */
        z-index: 2;
    }

    .slider2::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider2::before {
        left: 0;
        top: 0;
    }

/*.slide-track2 {
    animation: scroll 60s linear infinite;*/ /* Corrected animation timing function */
/*display: flex;
}*/
/*.slide-track2 {
    width: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #ccc;
}*/

.slide {
    flex: 0 0 200px; /*Adjusted slide width */
    height: 80px; /* Adjusted slide height */
    overflow: hidden; /* Ensure content doesn't overflow */
}


.slide-track2 {
    display: flex;
    width: calc(200px * 8 * 2); /* Total width of all slides combined (8 slides, doubled for seamless scroll) */
    animation: scroll 60s linear infinite; /* Continuous scrolling with a 30s duration */
}

.btn-third {
    display: block;
    text-align: center;
}

    .btn-third img {
        display: block;
        width: 100%;
        height: auto;
    }

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(calc(-200px * 14)); /* Adjusted translation distance */
    }
}

#globalnav {
    width: 100%;
    height: 41px;
    /* background: url(../images/RILBranding2019/topnav_bg.gif) repeat-x; */
    background: #2e627c;
    min-height: 22px;
    font-size: 130%;
    font-weight: 800;
    background: #344453;
    background: -moz-linear-gradient(top, rgba(145, 164, 179, 1) 0%, rgba(46, 60, 73, 1) 3%, rgba(52, 68, 83, 1) 12%, rgba(57, 70, 86, 1) 95%, rgba(7, 33, 45, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(145, 164, 179, 1)), color-stop(3%, rgba(46, 60, 73, 1)), color-stop(12%, rgba(52, 68, 83, 1)), color-stop(95%, rgba(57, 70, 86, 1)), color-stop(100%, rgba(7, 33, 45, 1)));
    background: -webkit-linear-gradient(top, rgba(145, 164, 179, 1) 0%, rgba(46, 60, 73, 1) 3%, rgba(52, 68, 83, 1) 12%, rgba(57, 70, 86, 1) 95%, rgba(7, 33, 45, 1) 100%);
    background: -o-linear-gradient(top, rgba(145, 164, 179, 1) 0%, rgba(46, 60, 73, 1) 3%, rgba(52, 68, 83, 1) 12%, rgba(57, 70, 86, 1) 95%, rgba(7, 33, 45, 1) 100%);
    background: -ms-linear-gradient(top, rgba(145, 164, 179, 1) 0%, rgba(46, 60, 73, 1) 3%, rgba(52, 68, 83, 1) 12%, rgba(57, 70, 86, 1) 95%, rgba(7, 33, 45, 1) 100%);
    background: linear-gradient(to bottom, rgba(145, 164, 179, 1) 0%, rgba(46, 60, 73, 1) 3%, rgba(52, 68, 83, 1) 12%, rgba(57, 70, 86, 1) 95%, rgba(7, 33, 45, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91a4b3',endColorstr='#07212d',GradientType=0);
    font-family: Constantia, serif !important;
}

#globalnav_menu {
    width: 100%;
    height: 100%;
    margin-left: 300px;
}

@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    #globalnav_menu {
        margin-left: 0; /* Override margin for this specific device */
    }
}
/* Media query for desktop view */
@media screen and (min-width: 430px) {
    #globalnav_menu {
        position: relative;
    }
}

/* Media query for mobile view */
@media screen and (max-width: 767px) {
    #globalnav_menu {
        position: relative;
        margin-left: 0; /* Adjust the margin for mobile view */
    }
}

.globalnav_menu_items {
    width: 980px;
    float: left;
    padding: 5px 0 2px 0;
}

.c-searchbox {
    width: 250px;
    float: left;
    position: relative;
    top: 40px;
}

.bg-color {
    background-color: #344453 !important;
}

.text-dark {
    color: white !important;
}

.mb-3, .my-3 {
    margin-bottom: 0rem !important;
}

.text-right {
    text-align: right !important;
    padding-left: 400px !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    background-color: #fff !important;
}

@media (max-width: 575.98px) {
    #SmallSearchInputBox {
        display: none;
    }
}

@media (min-width: 576px) {
    #header {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    #header {
        display: block; /* change display property for mobile view */
        align-items: initial; /* remove align-items property for mobile view */
    }
}

.navbar-brand, .nav .navbar-nav {
    color: white !important;
    list-style-type: none;
}

.navbar-toggle {
    background-color: white !important;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    color: white !important;
    height: 50px;
    padding: 14px 15px;
    font-size: 18px;
    line-height: 19px;
    list-style-type: none;
    font-weight: bold;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: #b9a1a1 !important;
    border: 3px solid transparent !important;
    border-radius: 4px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

h1 {
    background: linear-gradient(steelblue, midnightblue, steelblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


@media screen and (max-width: 426px) {
    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto;
        margin-left: auto;
       
        width: 100% !important;           /* ensure full width */
        box-sizing: border-box;
    }
}

.navbar-toggle {
    padding: 9px 10px;
    margin: 8px 15px;
    background-color: #b9a1a1 !important;
    border: 3px solid transparent !important;
    border-radius: 4px;
}

.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 1em;
    line-height: 20px;
    font-weight: bold;
    font-size: 130%;
    font-weight: 800;
    font-family: Constantia, serif !important;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #344453 !important;
}

.SubHeadtext-center {
    /* Adjust center alignment for smaller screens */
    display: block;
    padding-top: 150px;
}

.footer {
    background-color: #f8f9fa; /* Example background color */
    text-align: center; /* Center-align text by default */
}

  .footer-content p {
        margin: 5px 0;
    }

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row; /* Align items in a row on larger screens */
        justify-content: space-between; /* Space items evenly */
        text-align: left;
    }

        .footer-content p {
            margin: 0; /* Remove margins for better alignment */
        }
}
#hdimageid {  
    background-size: cover;
    width: 100%;
    min-height: 48vh; /* full page height */
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
 margin-top: 5px;
}
@media (max-width: 768px) {
    #hdimageid {        
        background-size: cover;
        height: 300px;
        margin-top: 60px;
       align-items: center; /* vertical center */
       justify-content: center; /* horizontal center */
       width:380px;
    }
}

@media (max-width: 480px) {
    #hdimageid {        
        background-size: cover;
        height: 200px;
        margin-top: 60px;
      align-items: center; /* vertical center */
      justify-content: center; /* horizontal center */
       width:420px;

    }
}
/* Tablet view */
@media (max-width: 768px) {
    .slideimg img {
        max-height: 4000px;
        border: 3px solid #fff;
        width:380px;

    }
}

/* Mobile view */
@media (max-width: 480px) {
    .slideimg img {
        max-height: 250px;  /* smaller height on mobile */
        width:350px;
 margin:20px;
    }
.sliderimg {
 height: 300px;
    margin: auto;
    overflow: hidden
}
}
/* Mobile view */
@media (max-width: 480px) {
    .slideimg img {
        max-height: 250px;  /* smaller height on mobile */
    }
.sliderimg {
 height: 300px;
    margin: auto;
    overflow: hidden
}
}


/* ✅ iPhone 14 Pro Max (430 x 932) */
@media screen and (max-width: 430px) and (max-height: 932px) {
    .footer {
        background: #1e2a36 !important;  /* example different color */
        padding: 25px 5px !important;    /* adjust padding for smaller space */
        font-size: 14px !important;      /* shrink text if needed */
    }
}

/* ✅ iPhone 12/13/14 (390 x 844) */
@media screen and (max-width: 390px) and (max-height: 844px) {
    .footer {
        background: #3c4b59 !important;  /* example different color */
        padding: 10px 5px !important;
        font-size: 13px !important;
    }
}

/* Container: left (icons) and right (search) in same row */
.header-share-search {
  display: flex !important;
  align-items: center;
  justify-content: space-between; /* icons left, search right */
  flex-wrap: nowrap;               /* do NOT wrap to next line */
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 206px; /* adjust as needed */
}

/* Social icons styling */
#socialLinks {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Make sure AddToAny anchors are inline-block so gap works */
#socialLinks a {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-right: 2px;
}

/* Search wrapper: keep it a fixed-ish max width but allow shrinking */
#searchWrap {
  flex: 0 0 auto;        /* don't grow; don't wrap */
  min-width: 200px;      /* minimum size */
  max-width: 420px;      /* max size; change if you want wider */
  width: 35%;            /* approximate -- will shrink on narrow screens */
}

/* The actual input should fill wrapper */
.header-search-input {
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* Small screens: reduce spacing & sizes but keep left/right layout */
@media (max-width: 480px) {
  .header-share-search {
    padding: 8px 2px;
    gap: 6px;
    white-space:nowrap;
  }
 #socialLinks a {
    width: 28px;  /* slightly smaller icons */
    height: 28px;
    line-height: 28px;
  }
    #searchWrap {
    min-width: 140px;
    max-width: 280px;
    width: 55%;
  }
}

/* If SharePoint CSS hides this area with utility classes, force display */
#headerShareSearch, #socialLinks, #searchWrap {
  display: block; /* fallback for some SharePoint quirks */
}

/* Mobile (phones) */
@media (max-width: 767px) {
    #socialLinks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    #SmallSearchInputBox {
        width: 100%;
        margin-top: 10px;
        display:none!important;

    }
}

/* Tablets (iPad Mini, iPad Air, iPad Pro portrait) */
@media (min-width: 768px) and (max-width: 1024px) {
    #socialLinks {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    #SmallSearchInputBox {
        flex: 1;
        min-width: 200px;
        margin-left: 10px;
        display:none!important;

    }
}

/* Large Tablets (iPad Air landscape, iPad Pro 1180px wide) */
@media (min-width: 1025px) and (max-width: 1366px) {
    #socialLinks {
        display: flex;
        justify-content: flex-start;
        gap: 18px;
    }

    #SmallSearchInputBox {
        flex: 1;
        max-width: 350px;
        margin-left: 15px;
        display:none!important;

    }
}